```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormItemConfig, DeviceProfileModel, DeviceProfile } from "@/pages/deviceProfile/components/DeviceBasicInfoInput"


import { deviceProfileApi, deviceStatusMap, getDeviceStatusLabel } from '@/pages/deviceProfile/components/DeviceBasicInfoInput'

const createFormConfig = <T extends FormItemConfig[]>(config: [...T]) => config;
const ListFields = [
    {
      label: 'ID',
      prop: 'profileId',
      type: 'input',
      disabled: false,
      width: "60",
    },
    {
      label: '序列号',
      prop: 'serialNumber',
      type: 'input',
      minWidth: "60",
    },
    {
      label: '设备名称',
      prop: 'deviceName',
      type: 'input',
      minWidth: "60",
    },
    {
      label: '设备型号',
      prop: 'deviceModel',
      type: 'input',
      minWidth: "60",
    },
    {
      label: '部门',
      prop: 'department',
      type: 'input',
      minWidth: "60",
    },
    {
      label: '状态',
      prop: 'status',
      type: 'input',
      width: "160",
      slot: true,
    },
    {
      label: '供应商',
      prop: 'supplier',
      type: 'input',
      minWidth: "60",
    },
    {
      label: '采购价格',
      prop: 'purchasePrice',
      type: 'input',
      width: "100",
      slot: true,
    },
    {
      label: '采购日期',
      prop: 'purchaseDate',
      type: 'datetime',
      width: "166",
    },
    {
      label: '创建时间',
      prop: 'createTime',
      type: 'datetime',
      width: "166",
      disabled: true,
    },
    {
      label: '更新时间',
      prop: 'updateTime',
      type: 'datetime',
      width: "166",
      disabled: true,
    },
    {
      label: '操作',
      prop: 'action',
      slot: true,
      width: "160"
    },
];
const formConfig = createFormConfig([
  {
    type: 'input',
    label: '序列号',
    prop: 'serialNumber',
    placeholder: '请输入序列号'
  },
  {
    type: 'input',
    label: '设备名称',
    prop: 'deviceName',
    placeholder: '请输入设备名称'
  },
  {
    type: 'input',
    label: '设备型号',
    prop: 'deviceModel',
    placeholder: '请输入设备型号'
  },
  {
    type: 'input',
    label: '供应商',
    prop: 'supplier',
    placeholder: '请输入供应商'
  },
  {
    type: 'input',
    label: '部门',
    prop: 'department',
    placeholder: '请输入部门'
  },
  {
    type: 'input',
    label: '采购价格',
    prop: 'purchasePrice',
    placeholder: '请输入采购价格',
    inputType: 'number'
  },
  {
    type: 'datetime',
    label: '采购日期',
    prop: 'purchaseDate',
    placeholder: '选择采购日期'
  },
  {
    type: 'select',
    label: '状态',
    prop: 'status',
    placeholder: '请选择状态',
    options: Object.entries(deviceStatusMap).map(([value, label]) => ({ label, value: Number(value) }))
  },
])

let deviceProfileList = ref<DeviceProfile[]>();
const formModel = ref<DeviceProfileModel>({
  isUpdate: null,
  profileId: null,
  serialNumber: '',
  deviceName: '',
  deviceModel: '',
  supplier: '',
  department: '',
  purchasePrice: null,
  purchaseDate: '',
  status: 1,
})
const bufferName = [
  { add: "添加设备档案" },
  { edit: "编辑设备档案"}
]
const titleName = "设备档案";
const searchMessage = ref({
  deviceName:'',
  serialNumber:'',
  status: null,
})

const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(100)

const title = ref('')
const visibleDrawer = ref(false)

onMounted(async () => {
  init();
})
const init = async () => {
  getDataListWithCondition();
}
const getDataListWithCondition = async () => {
    let params = {
        page: pageNum.value,
        size: pageSize.value,
        deviceName: searchMessage.value.deviceName ? searchMessage.value.deviceName : null,
        serialNumber: searchMessage.value.serialNumber ? searchMessage.value.serialNumber : null,
        status: searchMessage.value.status !== null ? searchMessage.value.status : null,
    }
    console.log(params);
    const deviceProfileListResponse = await deviceProfileApi.getDeviceProfileList(params);
    deviceProfileList.value = deviceProfileListResponse.data.records;
    console.log(deviceProfileListResponse)
    console.log(deviceProfileList)
    total.value = deviceProfileListResponse.data.total;
}
getDataListWithCondition();

const handleSubmit = async () => {
  if (formModel.value.isUpdate) {
      await deviceProfileApi.updateDeviceProfile(formModel.value.profileId!, formModel.value)
      ElMessage.success('更新成功')
    } else {
      await deviceProfileApi.addDeviceProfile(formModel.value)
      ElMessage.success('添加成功')
    }
    visibleDrawer.value = false
    getDataListWithCondition()
}

const clearData = () => {
  (Object.keys(formModel.value) as Array<keyof DeviceProfileModel>).forEach(key => {
    formModel.value[key] = null;
    // if (key === 'status') {
    //   formModel.value[key] = 1;
    // } else {
    //   formModel.value[key] = null;
    // }
  });
}

const showAddDrawer = () => {
    clearData()
    title.value = bufferName[0].add!
    visibleDrawer.value = true;
    formModel.value.isUpdate = false
}
const showEditDrawer = (row:DeviceProfile) => {
    title.value = bufferName[1].edit!
    visibleDrawer.value = true
    formModel.value = {
      isUpdate: true,
      profileId: row.profileId,
      serialNumber: row.serialNumber,
      deviceName: row.deviceName,
      deviceModel: row.deviceModel,
      supplier: row.supplier,
      department: row.department,
      purchasePrice: row.purchasePrice,
      purchaseDate: row.purchaseDate,
      status: row.status,
    }
    console.log(formModel.value);

}

const deletefor = async (profileId:number) => {
  deviceProfileApi.deleteDeviceProfile(profileId);
}

const deleteBox = (profileId:number) => {
    ElMessageBox.confirm(
        '您确定要删除这条记录吗',
        '注意',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(() => {
        deletefor(profileId)
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '删除取消',
        })
    })
}

const search = () => {
    getDataListWithCondition()
    ElMessage('获取成功')
}
const searchWithNoCondition = () => {
    searchMessage.value = { deviceName: '', serialNumber: '', status: null };
    getDataListWithCondition()
    ElMessage('获取成功')
}

const onSizeChange = (size: number) => {
    pageSize.value = size
    getDataListWithCondition()
    ElMessage('获取成功')

}
const onCurrentChange = (num: number) => {
    pageNum.value = num
    getDataListWithCondition()
    ElMessage('获取成功')
}


</script>

<template>
  <el-card class="page-container">
    <template #header>
        <div class="header">
            <span>{{ titleName }}</span>
            <div class="extra">
                <el-button type="primary" @click="showAddDrawer()">{{ bufferName[0].add }}</el-button>
            </div>
        </div>
    </template>
    <el-form inline>
      <el-form-item label="设备名称:">
          <el-input v-model="searchMessage.deviceName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="序列号:">
          <el-input v-model="searchMessage.serialNumber" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
          <el-select v-model="searchMessage.status" placeholder="请选择" clearable>
            <el-option
              v-for="option in Object.entries(deviceStatusMap).map(([value, label]) => ({ label, value: Number(value) }))"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="search()">搜索</el-button>
         <el-button @click="searchWithNoCondition()">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="deviceProfileList" style="width: 100%">
      <el-table-column
        v-for="col in ListFields"
        :key="col.prop"
        :label="col.label"
        :prop="col.prop"
        :width="col.width"
        :min-width="col.minWidth"
      >
        <template v-if="col.slot" #default="scope">
          <template v-if="col.prop === 'purchasePrice'">
            {{ scope.row.purchasePrice?.toLocaleString() || '-' }}
          </template>
          <template v-else-if="col.prop === 'status'">
            {{ getDeviceStatusLabel(scope.row.status) }}
          </template>
          <template v-else-if="col.prop === 'action'">
            <el-button
              :icon="Edit"
              circle
              plain
              type="primary"
              @click="showEditDrawer(scope.row)"
            ></el-button>
            <el-button
              :icon="Delete"
              circle
              plain
              type="danger"
              @click="deleteBox(scope.row.profileId)"
            ></el-button>
          </template>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 10]"
        layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
        @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />


  <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
    <el-form :model="formModel" label-width="120px">
      <template v-for="(item, index) in formConfig" :key="index">
        <el-form-item v-if="item.type === 'input'" :label="item.label">
          <el-input
            v-model="formModel[item.prop]"
            :placeholder="item.placeholder"
          ></el-input>
        </el-form-item>

        <el-form-item v-else-if="item.type === 'datetime'" :label="item.label">
          <el-date-picker
            v-model="formModel[item.prop]"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            :placeholder="item.placeholder"
          />
        </el-form-item>

        <el-form-item v-else-if="item.type === 'select'" :label="item.label">
          <el-select
            v-model="formModel[item.prop]"
            :placeholder="item.placeholder"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>


  </el-card>
</template>



<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>
```